import React, {useEffect, useState} from 'react';
import {Form, Select, Switch} from "antd";
import FormLayout from "@/assets/components/formLayout";
import {modulesUrl} from "@/assets/constant/modulesUrl";
import {ProFormText} from "@ant-design/pro-form";
import {useRequest} from "@@/plugin-request/request";
import {list} from "@/assets/service/baseService";
import {hooksSet, makeSelectOptionsData} from "@/assets/utils/utils";

const MenuForm: React.FC<{}> = (props) => {

  // @ts-ignore
  const id = props.match.params.id;
  const [form] = Form.useForm();

  /**
   * 获取上级菜单
   */
  const [parents, setParents] = useState()
  const getParentRun = useRequest(() => list(modulesUrl.sysMenu), {
    manual: true,
    onSuccess: (result) => {
      hooksSet(setParents, makeSelectOptionsData(result, "name", "id"));
    }
  }).run

  /**
   * 启动加载
   */
  useEffect(() => {
    getParentRun()
  }, []);

  return (
    <FormLayout
      id={id}
      title={"菜单"}
      form={form}
      moduleUrl={modulesUrl.sysMenu}
    >
      <ProFormText key="name" name="name" label="名称" placeholder="请输入名称" rules={[{required: true, message: '名称为必填项',}]}/>
      <ProFormText key="href" name="href" label="访问地址" placeholder="请输入访问地址" rules={[{required: true, message: '访问地址为必填项',}]}/>
      <ProFormText key="icon" name="icon" label="图标" placeholder="请输入图标"/>
      <Form.Item key="parentId" name="parentId" label="上级菜单"><Select placeholder={"请选择上级菜单"} options={parents}/></Form.Item>
      <Form.Item key="isShow" name="isShow" label="是否显示" initialValue={form.getFieldValue("isShow") == undefined ? "1" : form.getFieldValue("isShow")}>
        <Switch
          key={form.getFieldValue("isShow")}
          defaultChecked={form.getFieldValue("isShow") == undefined ? true : form.getFieldValue("isShow") === "1" ? true : false}
        />
      </Form.Item>
    </FormLayout>
  );
};

export default MenuForm;
